import React from 'react';
import { Form, Icon, Input, Button } from 'antd';
import styles from './login.css';
const FormItem = Form.Item;

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.props.login(values.tel, values.password);
      }
    });
  }

  UNSAFE_componentWillMount = () => {
    this.props.checkAuth();
  }

  render() {
    console.log('-------');
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} className={styles.login_form}>
        <FormItem>
          {getFieldDecorator('tel', {
            rules: [{ required: true, message: '输入手机号' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="手机号" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: '输入密码' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit" className={styles.login_form_button}>登录</Button>
        </FormItem>
      </Form>
    );
  }
}

const login = Form.create()(NormalLoginForm);

export default login;
